{% extends "layout_full.html" %}

{% block title %}
Post a listing
{% endblock %}

{% block css_files %}
  <style>
  table {
    padding: 0;
    border-spacing: 0;
  }
  .caption {
    font-size: 12px;
    font-style: italic;
  }
  .expand {
    font-size: 10px;
  }
  .debug {
    position: absolute;
    top: 100px;
    right: 20px;
    width: 400px;
    height: 400px;
    border: 1px solid black;
    background-color: #ddf;
    overflow: auto;
    font-size: 10px;
    font-family: courier;
    display:none;
  }
  </style>
{% endblock %}

{% block subheader %}
<h1>Post a volunteer listing</h1>
{% endblock subheader %}

{% block content %}
<i>
Instructions go here: warn that illegal postings may be reported.<br/>
explain privacy and offer login/logout?  "logged-in users postings tend to get approved faster" <br/>
</i>

<p/>

<form id='form' method='POST' onsubmit="return validate_form()"> 

<div id='dbg' class='debug'></div>
 
<table>
<tr><td>Enter a title:</td><td><input type="text" name="title" size="40"></td></tr>
<tr><td></td><td class='caption'>e.g. Ohlone Park clean up and volleyball</</td></tr>
</table>
<br/>
Describe the activity:
<a id='description_link' class='expand' href='#' onclick='expandTextbox("description", 3, 30)'>give me more room to write...</a>
<br/>
<textarea name="description" rows="3" cols="80"></textarea><p/>

Describe any special skills or equipment that is needed: (optional)
<a id='skills_link' class='expand' href='#' onclick='expandTextbox("skills", 2, 8)'>give me more room to write...</a>
<br/>
<textarea name="skills" rows="3" cols="80"></textarea><p/> 
<p/> 
Is the opportunity happening at an address or can volunteers help remotely from their homes?<br/> 
<table>
<tr><td><input type="radio" name="virtual" value="Yes">Help from home</td></tr>
<tr><td valign='top'><input type="radio" name="virtual" value="No">Specific location&nbsp;&nbsp;</td>
    <td><table style='margin-top:3px'>
    <tr><td style='font-size:12px; text-align:right; vertical-align:top;'>location name:</td>
        <td><input type="text" name="addrname1" size="40"><span class='caption'> e.g. Ohlone Park</span></td></tr>
    <tr><td style='font-size:12px; text-align:right; vertical-align:top'>street address:</td>
        <td><input type="text" size='45' name="street1" value="street address" onclick="this.value='';"><br/>
            <input type="text" size='45' name="street2"><br/>
            <input type="text" size='20' name="city" value="city" onclick="this.value='';">
            <input type="text" size='5' name="state" value="state" onclick="this.value='';"><br/></td></tr>
    </table></td></tr>
</table>

Is the opportunity sponsored by an organization?<br/> 
<input type="radio" name="sponsored" value="No"> No<br/> 
<input type="radio" name="sponsored" value="Yes"> Yes. What&#39;s the organization&#39;s name? <input type="text" name="sponsoringOrganizationsName" size="40"><p/> 
 
When does the opportunity start?<br/> 
<input type="radio" name="openEnded" value="Yes"> Now/anytime<br/> 
<input type="radio" name="openEnded" value="No"> On <input type="text" name="startDate" size="10" maxlength="10" value="MM/DD/YYYY">, from <input type="text" name="startTime" size="20" value="[HH:MM] [am/pm]"> to <input type="text" name="endTime" size="20" value="[HH:MM] [am/pm]"><p/> 
 
How can people learn more about this opportunity and reserve a place? (check all that apply)<br/> 
<input type="checkbox" name="contactNoneNeeded"> No need to contact -- just show up<br/> 
<input type="checkbox" name="contactEmail"> Email this address <input type="text" name="contactEmail"><br/> 
<input type="checkbox" name="contactPhone"> Call <input type="text" name="contactPhone" value="xxx-xxx-xxxx" size="15"> and ask for <input type="text" name="conactName"><br/> 
<input type="checkbox" name="detailURL"> Visit this web site <input type="text" name="detailURL" size="30"><br/> 
<p/> 

show <a name='advanced' href='#advanced' onclick='toggleElement("advd");'>advanced options</a> including age and gender restrictions, end time, recurring events, and more.<p/>

<div id='advd' style='display:none'> 
How often does it happen?<br/> 
<table>
<tr><td><input type="radio" name="recurrence" value="No"></td><td> Once</td></tr>
<tr><td><input type="radio" name="recurrence" value="Daily"></td><td> Daily</td></tr>
<tr><td><input type="radio" name="recurrence" value="Weekly"></td><td> Weekly, on
  Sun: <input type="checkbox" name="weeklySun"> 
  Mon: <input type="checkbox" name="weeklyMon"> 
  Tue: <input type="checkbox" name="weeklyTue"> 
  Wed: <input type="checkbox" name="weeklyWed"> 
  Thu: <input type="checkbox" name="weeklyThu"> 
  Fri: <input type="checkbox" name="weeklyFri"> 
  Sat: <input type="checkbox" name="weeklySat"> 
</td></tr>
<tr><td><input type="radio" name="recurrence" value="BiWeekly"></td><td> Every other week, on
  Sun: <input type="checkbox" name="biweeklySun"> 
  Mon: <input type="checkbox" name="biweeklyMon"> 
  Tue: <input type="checkbox" name="biweeklyTue"> 
  Wed: <input type="checkbox" name="biweeklyWed"> 
  Thu: <input type="checkbox" name="biweeklyThu"> 
  Fri: <input type="checkbox" name="biweeklyFri"> 
  Sat: <input type="checkbox" name="biweeklySat">
</td></tr>
<tr><td><input type="radio" name="recurrence" value="Monthly"></td><td> Monthly</td></tr>
</table>
<p/> 
The opportunity ends on: <input type="text" name="endDate" size="10" maxlength="10" value="MM/DD/YYYY"><br/>
Are attendees paid? <select name="paid"><option value="Yes">Yes</option><option value="No" selected>No</option></select><br/>
How many hours per week should a volunteer be ready to commit to? <input type="text" name="commitmentHoursPerWeek"><br/>
Who is allowed to participate? (check all that apply)<br/> 
<input type="radio" name="audienceAge" value="anyage"> Anyone, including kids under 13<br/> 
<input type="radio" name="audienceAge" value="atleast"> Anyone at least <input type="text" name="minAge" size="3"> years of age<br/> 
<input type="radio" name="audienceAge" value="teens"> Teenagers or adults<br/> 
<input type="radio" name="audienceAge" value="seniors"> Seniors only please<br/> 
<input type="checkbox" name="audienceSexRestricted"> <select name="sexRestrictedTo"><option value="Neither" selected>[Women/Men]</option><option value="Female">Women</option><option value="Male">Men</option></select> only please.<p/> 
</div>

<script type="text/javascript" 
 src="http://api.recaptcha.net/js/recaptcha_ajax.js"></script>

<br/>

<table><tr>
<td><div id='recaptcha_div'></div>
<noscript>
   <iframe src="http://api.recaptcha.net/noscript?k=6Le2dgUAAAAAAEP97PJfAlWV09PlFLc-xbte2Zt-"
       height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
   </textarea>
   <input type="hidden" name="recaptcha_response_field" 
       value="manual_challenge">
</noscript>
</td>
<td style='padding-left:5px; vertical-align:middle; font-size:12px'>
<span style='width:200px'>Sorry, no robots allowed:<br/>please enter words to the left,<br/>it's only human.</span><p/>
<span id='submit' onclick='submit_form()' style='padding:4px 10px 4px 10px;background-color:#ddf;border:1px solid #333;font-size:24px;'>submit</span></td>
</tr></table>

</form>

<script>
Recaptcha.create("6Le2dgUAAAAAAEP97PJfAlWV09PlFLc-xbte2Zt-", "recaptcha_div", {
  theme: "blackglass",
});

var location_ok = false;
var qry = location.search.substring(1);
var args = qry.split('&');
for (var i = 0, n = args.length; i < n; i++) {
  var ar = args[i].split('=');
  if (ar[0]=='dbg' && ar[1]!='0') {
    var dbg = document.getElementById("dbg");
    if (dbg) {
      dbg.style.display = 'inline';
    }
  }
}

function d(msg) {
  var dbg = document.getElementById("dbg")
  if (dbg) {
    dbg.innerHTML += msg + "<br/>";
  }
}

function toggleElement(id) {
  d("toggleElement("+id+")");
  var el = document.getElementById(id);
  if (el.style.display == 'none') {
    el.style.display = 'inline';
  } else {
    el.style.display = 'none';
  }
  return false;
}

function expandTextbox(name, incr, max) {
  d("expandTextbox("+name+")");
  var el = document.getElementsByName(name)[0];
  if (el.rows < max) {
    el.rows += incr;
  } else {
    var link = document.getElementById(name+"_link");
    link.innerHTML = "sorry, that's the longest we allow";
  }
  return false;
}

function checkLocation() {
   // TODO: implement... (be sure not to get maps api errors testing on diff domains...)
   
}

function reset_submit() {
  var submit = document.getElementById('submit');
  submit.style.backgroundColor = '#ddf';
  submit.style.color = 'black';
  submit.style.borderColor = 'black';
  submit.innerHTML = 'submit';
}

function submit_form() {
  d("submit_form")
  res = validate_form();
  if (!res) { return false; }
  var form = document.getElementById('form');
  form.submit();
}

function validate_form() {
  d("validate_form");
  var submit = document.getElementById('submit');
  submit.style.backgroundColor = '#eef';
  submit.style.color = 'gray';
  submit.style.borderColor = '#666';

  d("challenge: "+Recaptcha.get_challenge());
  d("response: "+Recaptcha.get_response());

  reset_submit(); return true;

  submit.innerHTML = 'checking location...';
  if (location_ok == "unchecked") {  
    // in case the browser didn't fire onblur event in the form
    checkLocation();
  }
  if (location_ok != "ok") {
    msg = "cannot locate street address-- please try again.";
    d("error: "+msg);
    reset_submit();
    return false;
  }

  return true;
}

</script>
{% endblock %}
